import React, { useEffect, useState } from 'react';
import { useDispatch } from 'umi';
import { Tabs, Table, Tag, Space } from 'antd';
import {
  userData,
  userAdmin,
  getApi,
  getIdapi,
  getView,
  getViewApi,
} from '@/services/index';

const QuestionType: React.FC = () => {
  // 通过useDispatch拿到派发redux的dispatch
  const dispatch = useDispatch();
  const { TabPane } = Tabs;

  //用户数据
  const [getUserdata, setUserdata] = useState<any[]>([]);
  //身份数据
  const [getUserAdmin, setUserAdmin] = useState<any[]>([]);
  //api接口权限
  const [getApi1, setApi] = useState<any[]>([]);
  //身份和api接口关系
  const [getApiid, setApiid] = useState<any[]>([]);
  //获取视图权限数据
  const [getViewdata, setViewdata] = useState<any[]>([]);
  //身份和视图权限关系
  const [getViewApi1, setViewApi] = useState<any[]>([]);

  const columns = [
    {
      title: '用户名',
      dataIndex: 'user_name',
      key: 'user_id',
    },
    {
      title: '密码',
      dataIndex: 'user_pwd',
      key: 'user_id',
    },
    {
      title: '身份',
      dataIndex: 'identity_text',
      key: 'user_id',
    },
  ];

  const column = [
    {
      title: '身份名称',
      dataIndex: 'identity_text',
      key: 'identity_id',
    },
  ];

  const apidata = [
    {
      title: 'api权限名称',
      dataIndex: 'api_authority_text',
      key: 'api_authority_id',
    },
    {
      title: 'api权限url',
      dataIndex: 'api_authority_url',
      key: 'api_authority_id',
    },
    {
      title: 'api权限方法',
      dataIndex: 'api_authority_method',
      key: 'api_authority_id',
    },
  ];
  const apiIddata = [
    {
      title: '身份名称',
      dataIndex: 'identity_text',
      key: 'identity_api_authority_relation_id',
    },
    {
      title: 'api权限名称',
      dataIndex: 'api_authority_text',
      key: 'identity_api_authority_relation_id',
    },
    {
      title: 'api权限url',
      dataIndex: 'api_authority_url',
      key: 'identity_api_authority_relation_id',
    },
    {
      title: 'api权限方法',
      dataIndex: 'api_authority_method',
      key: 'identity_api_authority_relation_id',
    },
  ];
  const viewData = [
    {
      title: '视图权限名称',
      dataIndex: 'view_authority_text',
      key: 'view_authority_id',
    },
    {
      title: '视图id',
      dataIndex: 'view_id',
      key: 'view_authority_id',
    },
  ];

  const viewApi = [
    {
      title: '身份',
      dataIndex: 'identity_text',
      key: 'identity_view_authority_relation_id',
    },
    {
      title: '视图名称',
      dataIndex: 'view_authority_text',
      key: 'identity_view_authority_relation_id',
    },
    {
      title: '视图id',
      dataIndex: 'view_id',
      key: 'identity_view_authority_relation_id',
    },
  ];

  function callback(key: any) {
    console.log(key);
  }

  //用户数据
  useEffect(() => {
    userData().then((res) => {
      setUserdata(res.data);
      // console.log(res.data)
      // debugger;
    });
  }, []);

  //身份数据
  useEffect(() => {
    userAdmin().then((res) => {
      // console.log(res.data);
      setUserAdmin(res.data);
      // debugger;
    });
  }, []);

  //api接口权限
  useEffect(() => {
    getApi().then((res) => {
      // console.log(res.data)
      setApi(res.data);
    });
  }, []);

  //身份和api接口
  useEffect(() => {
    getIdapi().then((res) => {
      setApiid(res.data);
    });
  }, []);

  //视图接口权限
  useEffect(() => {
    getView().then((res) => {
      // console.log(res.data)
      setViewdata(res.data);
    });
  }, []);
  //身份和视图权限关系
  useEffect(() => {
    getViewApi().then((res) => {
      setViewApi(res.data);
      //console.log(res.data);
    });
  }, []);

  useEffect(() => {
    dispatch({
      type: 'question/getQuestionType',
    });
  }, []);

  return (
    <div>
      <h1>用户展示</h1>
      <Tabs onChange={callback} type="card">
        <TabPane tab="用户数据" key="用户数据">
          <Table columns={columns} dataSource={getUserdata} />
        </TabPane>
        <TabPane tab="身份数据" key="身份数据">
          <Table columns={column} dataSource={getUserAdmin} />
        </TabPane>
        <TabPane tab="api接口权限" key="api接口权限">
          <Table columns={apidata} dataSource={getApi1} />
        </TabPane>
        <TabPane tab="身份和api接口关系" key="身份和api接口关系">
          <Table columns={apiIddata} dataSource={getApiid} />
        </TabPane>
        <TabPane tab="视图接口权限" key="视图接口权限">
          <Table columns={viewData} dataSource={getViewdata} />
        </TabPane>
        <TabPane tab="身份和视图权限关系" key="身份和视图权限关系">
          <Table columns={viewApi} dataSource={getViewApi1} />
        </TabPane>
      </Tabs>
    </div>
  );
};

export default QuestionType;
